<template>
	<view class="container">
		<view class="wx-auth-container">
			<div class="box">
				<view class="logo-info  ">
					<text class="title">欢迎进入{{ projectName }}</text>
				</view>
				
				<view class="small-tips">
					<view>授权通过后，下次无需再次提交审核，您的信息已登记备案，作为您进入小区的凭证，请文明通行</view>
					<!-- <view>您的公开信息（手机号码）</view> -->
				</view>
				<view class="btns"><!-- @getAuthorize="getPhoneNumber"getUserProfileNew scope='userInfo'-->
				<!-- <button open-type="getAuthorize"  scope='userInfo'
				@getAuthorize="getUserProfileNew"  class="btn-auth" v-if="isShowUserInfoBtn">授权登记下一步</button> -->
					<view class="xztv-column" v-if="isShowUserInfoBtn">
						<view class="acea-row row-middle">
							<input type="text" placeholder="请输入姓名" class="texts" v-model="name"/>
						</view>
						
						<button class="btn-auth" @click="addRecord()">提交</button>
					</view>
					
					<button open-type="getAuthorize"  scope='phoneNumber'
         @getAuthorize="getPhoneNumber"  class="btn-auth" v-else>授权门岗管理员</button>
       <!-- <button type="primary"  open-type="getAuthorize"  scope='phoneNumber' bindtap="getUserProfile" @getphonenumber="getUserProfileNew" class="btn-auth">使用微信授权</button> -->
					<div @click="backToHome" class="btn-callback">暂不授权</div>
				</view>
			</div>
		</view>
	</view>
</template>

<script>
	import {
		add
	} from "@/api/stranger.js";

	import storage from "@/utils/storage.js";
	
	import config from '@/config/config';
	export default {
		data() {
			return {
				background: {
					backgroundColor: "transparent"
				},
				// 是否展示手机号码授权弹窗，默认第一步不展示，要先获取用户基础信息
				phoneAuthPopup: false,
				show: false,
				// 授权信息展示，商城名称
				projectName: config.name,
				//微信返回信息，用于揭秘信息，获取sessionkey
				code: "",
				//微信昵称
				nickName: "",
        name:"",
        image:"",
				baseSite: {},
        deviceId:"",
				isShowUserInfoBtn:false,
				str:"",//加密手机号字符串
			};
		},
    onLoad(options){
     this.deviceId=options.id;
     this.nickName=options.nickName;
     this.image=options.avatar;
    },
		onShow(){
			this.isShowUserInfoBtn=false;
			// my.getAuthUserInfo({
			// 	success: (res) => {
			// 		console.log('用户信息', res); // 打印用户信息到控制台
			// 		// 处理用户信息，例如显示头像和昵称等
			// 	},
			// 	fail: (err) => {
			// 		console.error('获取用户信息失败', err); // 处理错误情况
			// 	}
			// });
		},
		//微信小程序进入页面，先获取code，否则几率出现code和后续交互数据不对应情况
		mounted(){
			let that = this;
			//获取code
			uni.login({
				success: (res) => {
					console.log("code", res.code);
					that.code = res.code;
				},
			});
		},
		methods: {
      backToHome(){
        uni.navigateBack({
        	delta: 1,
        });
      },
      getUserProfileNew(e) {
      	console.log(e);
      	let that = this;
      	// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
      	uni.getUserProfile({
      		desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      		success: (res) => {
      			console.log("getUserProfile", res);
      			that.nickName = res.userInfo.nickName;
      			that.image = res.userInfo.avatarUrl;
      			//展示手机号获取授权
      			//this.getPhoneNumber(e)
      		},
      		fail: (res) => {
      			that.nickName = "微信用户";
      			that.image =
      				"https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132";
      			//展示手机号获取授权
      		},
      	});
      },
			
			phoneBindPopupClose(e) {
				if (e.show == false) {
					this.$refs.verification.hide();
					console.log("phoneBindPopupClose", e)
				}

			},
			
			addRecord(){
        if(this.name==""){
          uni.showToast({
          	title:"请填写姓名",
          	duration:2000,
          	icon:"none"
          })
          return ;
        }
				let that=this;
				add({
				  str:this.str,
				  auth_code:that.code,
				  nickName:that.nickName,
          name:this.name,
				  image:that.image,
				  device_id:that.deviceId
				}).then((res)=>{
				  if(res.data.code==0){
            uni.showModal({
            	title: '提示',
            	content: '授权管理员成功',
              showCancel:false,
            	success: function (re) {
            		if (re.confirm) {
            			uni.navigateBack({
            				delta: 1,
            			});
            		}
            	}
            });
				   
				  	
				  }else{
				  	uni.showToast({
				  		title:res.data.msg,
				  		duration:2000,
				  		icon:"none"
				  	})
				  }
				})
			},
			
			//获取手机号授权
			async getPhoneNumber(e) {
				console.log('获取授权',e);
          let that=this;
          my.getPhoneNumber({
            success: (res) => {
							that.str=JSON.parse(res.response).response;
							that.isShowUserInfoBtn=true;
							//that.addRecord();
              console.log("my.getphonenumber的res:", JSON.parse(res.response))
              
            },
            fail: (err) => {
              console.log("err",err);
            },
          });

				

				// let code = this.code;
				// let image = this.image;
				// let nickName = this.nickName;
				// let res = await mpAutoLogin({
				// 	code,
				// 	image,
				// 	nickName
				// }, "alipay")
				// uni.hideLoading();
				// console.log("aliAutoLogin", res);
			},
			
			
			async scopeUserInfo(e) {
				console.log(e)
				my.getAuthCode({
					scopes: 'auth_base',
					success: (infoRes) => {
						this.auth_code = infoRes.authCode
						console.log('支付宝用户基础信息', infoRes);
						// this.sendUserInfo(infoRes.userInfo.avatarUrl,infoRes.userInfo.nickName);
						// this.phoneAuthPopup = true;
						this.login(infoRes.authCode);
						console.log("res",res);
					},
					fail: res => {
						my.alert({
							title: 'my.getAuthCode 调用失败',
							content: JSON.stringify(res),
						});
					}
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
  .acea-row.row-middle {
    margin-bottom: 30rpx;
    input {
      margin-left: 20rpx;
      display: block;
      border:1px solid  #2169df;
      border-radius: 8rpx;
      
    }
  }
  .texts {
    flex: 1;
    font-size: 28rpx;
    height: 80rpx;
    line-height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    margin-left: 8upx;
    // #ifdef MP
    justify-content: flex-start;
    // #endif
  
    &:focus-visible {
      outline: none;
    }
  }
	/*微信授权*/
	page {
		background-color: #ffffff;
		
	}
	.container {
		height: 100vh;
		//background-image: linear-gradient(rgba(252, 110, 100, 1), rgba(255, 151, 65, 0.7), rgba(255, 151, 65, 0.3), rgba(249, 108, 101, 0));
		display: flex;
	}

	.wx-auth-container {
		width: 100%;
		margin-top: 10%;
	}

	.logo-info {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		flex-direction: row;
		align-items: flex-start;
		padding: 20rpx;

		font-weight: bold;
	}

	

	.logo-info-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		border: none;
	}

	text.title,
	text.shop {
		display: inline-block;
		font-size: 60rpx;
		color: #333;
	}

	text.shop {
		display: inline-block;
		font-size: 55rpx;
		color: #333;
	}

	.box {
		margin: 0 32rpx;
	}

	/* 文字提示*/
	.small-tips {
		width: 94%;
		padding: 20rpx;
		font-size: 24rpx;
		margin: 0 0 20rpx;
		// color: #999;
		color: rgb(226, 110, 95)
	}

	.auth-button {
		padding: 10px 20px;
		width: calc(100% - 20 * 4rpx);
	}

	.tips {
		width: 80%;
		text-align: left;
		margin: 6% 10%;
		margin-top: 48rpx;
		line-height: 1.75;
	}

	.register {
		
		border: none !important;
		background: #fff !important;
	}

	.btn-auth {
		color: white;
    background: #2169df;
		//background-image: linear-gradient(45deg, rgb(251, 108, 100), rgb(246, 149, 98));
		width: 92%;
		margin: 0 auto 40rpx;
		border-radius: 100px;
		animation: mymove 5s infinite;
		-webkit-animation: mymove 5s infinite;
		/*Safari and Chrome*/
		animation-direction: alternate;
		/*轮流反向播放动画。*/
		animation-timing-function: ease-in-out;
		/*动画的速度曲线*/
		/* Safari 和 Chrome */
		-webkit-animation: mymove 5s infinite;
		-webkit-animation-direction: alternate;
		/*轮流反向播放动画。*/
		-webkit-animation-timing-function: ease-in-out;
		/*动画的速度曲线*/
	}

	.btn-callback {
		text-align: center;
		font-size: 30rpx;
		background: transparent;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 100px;
		width: 92%;
		margin: 0 auto;
		color: #2169df;
		border: 1px solid #2169df;
	}

	.btns {
		margin-top: 100rpx;
		display: flex;
		flex-direction: column;
		width: 100%;
		justify-content: center;
	}

	@keyframes mymove {
		0% {
			transform: scale(1);
			/*开始为原始大小*/
		}

		25% {
			transform: scale(1.1);
			/*放大1.1倍*/
		}

		50% {
			transform: scale(1);
		}

		75% {
			transform: scale(1.1);
		}
	}
</style>